1. 擬態類別（Pseudo-class）

這是針對「元素的狀態」來加樣式。想像它像是「條件判斷」，滿足就套用。
常見的有：

-:hover → 滑鼠移過去時

-:active → 點下去的一瞬間

-:focus → 表單被點選或輸入中

-:nth-child() → 選擇第幾個孩子

例子：按鈕 hover 效果

HTML
<button class="btn">送出</button>

CSS
.btn {
  background: skyblue;
  color: white;
  padding: 10px 20px;
  border: none;
}

.btn:hover {
  background: blue; /* 滑鼠移過去變色 */
}

使用者互動時，畫面馬上有反饋，讓體驗更生動。

2. 擬態元素（Pseudo-element）

這是針對「元素的一部分」來下樣式，像是偷偷在 DOM 裡新增一個小區塊，但不用真的寫 HTML。

常見的有：

::before → 在元素最前面插入內容

::after → 在元素最後面插入內容

::first-letter → 選第一個字母

::selection → 選取文字時的樣式

例子：加上小標籤

HTML
<h2 class="title">最新消息</h2>

CSS
.title::before {
  content: "🔥 ";
}
.title::after {
  content: " ✅";
}

結果：
🔥 最新消息 ✅

不用多加 ，就能自動插入符號，非常方便。

結論

擬態選擇器就是 CSS 的小加成技能：

Pseudo-class（針對狀態） → 控制互動感。

Pseudo-element（針對部分） → 補上小細節。

熟悉它們後，你會發現很多酷炫 UI 效果，其實背後只是一點點 CSS 魔法 ✨。